import React, { useEffect, useRef } from "react";
import styles from "./TodoListItem.module.css";
const TodoListItem = (props) => {
  const {
    text,
    isComplete,
    index,
    handleChangeComplate,
    handleDeleteItem,
    getTodoItemPosition,
    handleDragStart,
    handleDrag,
    handleDrop,
    handleTodoListItemClick,
  } = props;
  const target = useRef(null);
  useEffect(() => {
    getTodoItemPosition({
      x: target.current.offsetLeft,
      y: target.current.offsetLeft,
    });
  }, [getTodoItemPosition]);
  return (
    <div
      className={`${styles["container"]} ${
        isComplete ? styles["complate-bg"] : ""
      }`}
      draggable
      onDragStart={() => handleDragStart(index)}
      onDrag={handleDrag}
      onDragOver={(event) => event.preventDefault()}
      onDrop={() => handleDrop(index)}
      ref={target}
      onClick={() => handleTodoListItemClick(index)}
    >
      <h3>{text}</h3>
      <br />
      <div>
        <label onClick={(e) => e.stopPropagation()}>
          <span style={{ marginRight: "20px" }}>是否完成</span>
          <input
            type="checkbox"
            defaultChecked={isComplete}
            id="checkbox"
            onChange={() => handleChangeComplate(props)}
          ></input>
        </label>
      </div>
      <div
        className={styles["close"]}
        onClick={(e) => {
          e.stopPropagation();
          handleDeleteItem(props);
        }}
      >
        X
      </div>
    </div>
  );
};
export default TodoListItem;
